<template>
  <div>
    <!-- 图片轮播 -->
    <!-- <an-carousel class="mb-2 hidden-xs"></an-carousel> -->

    <!-- 文章推荐 -->
    <b-list-group class="mb-2">
      <b-list-group-item
        v-for="item in listData"
        :key="item.id"
        :href="'/view/contPage/' + item.id"
      >{{ item.title }}</b-list-group-item>
    </b-list-group>

    <!-- 广告位 -->
    <b-card
      title="扫一扫"
      :img-src="'data:image/png;base64,' + imgSrc"
      img-alt="Image"
      img-top
      tag="article"
      style="max-width: 20rem;"
      class="mb-2 hidden-xs"
    >
      <b-card-text>转移到手机上阅读</b-card-text>

      <!-- <b-button href="#" variant="primary">Go somewhere</b-button> -->
    </b-card>
  </div>
</template>

<script>
import anCarousel from "@/components/anCarousel";
import { creatQrCode } from "@/assets/services/api";
export default {
  name: "AnRight",
  components: {
    anCarousel,
  },
  data() {
    return {
      listData: [],
      imgSrc: "", // 二维码图片
    };
  },
  mounted() {
    this.anLoad();
    this.creatQrCode();
  },
  methods: {
    anLoad() {
      this.$store.dispatch("getRightList").then((res) => {
        this.listData = res;
      });
    },
    // 生成二维码图片
    creatQrCode() {
      let rout = this.$route.fullPath;
      const url = process.env.baseUrl + rout;
      const nd = {
        text: url,
        logoPath: "https://anranweb.cn/images/logo.jpg",
      };
      creatQrCode(nd).then((res) => {
        this.imgSrc = res;
      });
    },
  },
};
</script>

<style scoped></style>
